<script setup>
import { ref, onMounted, nextTick } from 'vue'
import $ from 'jquery'
const props = defineProps({
  width: {
    type: Number,
    default: 927
  },
  height: {
    type: Number,
    default: 150
  },
  data: {
    type: Array,
    default: () => []
  }
})
var dom = ref()
onMounted(() => {
  //本地模式

  dom.value.style.backgroundColor = 'transparent'
  let dommainid = $(dom).get(0).id
  let dommainidz = $(dom).get(0).id + 'Z'

  var strVar = ''
  // \"  可以在" 字符串中使用 " 字符 转移了  eslint会自动将\" 格式化为 " 而将外部的 " 变成单引号
  strVar += '<div id="' + dommainidz + '" class="tdpielzf_main">'
  strVar += '	<div class="bottom">'
  strVar += '		<img src="https://img.isqqw.com/profile/upload/2025/05/13/21295c69-849d-4934-a0b2-a73416193fcc.png"'
  strVar += '			 alt="">'
  strVar += '		<div class="bottom_num" style="visibility: hidden"><span>25.8%<\/span><\/div>'
  strVar += '		<div class="bottom_title" style="visibility: hidden">隐患排查次数<\/div>'
  strVar += '		<div id="chartdiv"><\/div>'
  strVar += '	<\/div>'
  strVar += '	<div class="top">'
  strVar += '		<div class="flash fs-32 dt">' + props.data[1] + '<span>%<\/span><\/div>'
  strVar += '	<\/div>'
  strVar += '<\/div>'
  $(dom.value).html(strVar)

  nextTick(() => {
    console.log(dom)
    var chartdom = $(dom.value).find('#chartdiv')[0]
    console.log(chartdom)
    var myChart = echarts.init(chartdom)

    var dataindex = 0
    var maincolor = 'rgba(0, 126, 255, 1)'
    var showtitle = true

    var getmydmc = '隐患排查次数' //数据点名称
    var getmyd = props.data[1] //同比
    var getmydcs = props.data[0] //次数

    const getmydys = getmyd

    if (getmyd > 100) {
      getmyd = 100
    }

    if (getmyd < 0) {
      getmyd = 0
    }

    getmyd = getmyd * 0.3

    const colorList1 = []
    let total = 30
    let datanum = getmyd
    let dataList = []
    let sum = 10
    const chartdata = []
    for (var i = 1; i <= total; i++) {
      chartdata.push({
        name: i,
        value: 1
      })
      if (i >= datanum) {
        colorList1.push('')
        colorList1.push('')
      } else {
        colorList1.push(maincolor)
        colorList1.push('')
      }
    }
    dataList = chartdata
    const data1 = []
    chartdata.forEach(item => {
      const _item = {
        ...item
      }
      if (!_item.value) {
        _item.value = sum / 100
      }
      data1.push(_item, {
        name: '',
        value: sum / 100,
        labelLine: {
          show: false,
          lineStyle: {
            color: 'transparent'
          }
        },
        itemStyle: {
          color: 'transparent'
        }
      })
    })

    const option = {
      series: [
        {
          type: 'pie',
          radius: ['55%', '75%'],
          center: ['50%', '50%'],
          hoverAnimation: false,
          startAngle: 90,
          minAngle: 5,
          emphasis: {
            scale: true,
            scaleSize: 15,
            focus: 'series',
            blurScope: 'coordinateSystem'
          },
          label: {
            show: false
          },
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList1[params.dataIndex]
              }
            }
          },
          data: data1,
          z: 666
        }
      ]
    }

    myChart.setOption(option)
  })
})
</script>
<template>
  <div
    ref="dom"
    :style="{
      width: width + 'rem',
      height: height + 'rem'
    }"
  ></div>
</template>
